<!DOCTYPE html>
<html>
<head>
    <title>Custom tools</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example" class="k-content">
    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
            &lt;p&gt;&lt;img src=&quot;http://www.kendoui.com/Image/kendo-logo.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
            &lt;p&gt;
                Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
                In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
                accessibility standards and provides API for content manipulation.
            &lt;/p&gt;
            &lt;p&gt;Features include:&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;
                &lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
                &lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
                &lt;li&gt;Cross-browser support&lt;/li&gt;
                &lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
                &lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
            &lt;/ul&gt;
            &lt;p&gt;
                Read &lt;a href=&quot;http://www.kendoui.com/documentation/introduction.aspx&quot;&gt;more details&lt;/a&gt; or send us your
                &lt;a href=&quot;http://www.kendoui.com/forums.aspx&quot;&gt;feedback&lt;/a&gt;!
            &lt;/p&gt;
    </textarea>

    <script type="text/x-kendo-template" id="viewHtml-template">
        <div>
            <textarea style="width: 400px; height: 300px;"></textarea>
            <div class="viewHtml-actions">
                <button class="k-button viewHtml-update">Update</button>
                <button class="k-button viewHtml-cancel">Cancel</button>
            </div>
        </div>
    </script>

    <script>
        $("#editor").kendoEditor({
            tools: [
                {
                    name: "viewHtml",
                    tooltip: "View HTML",
                    exec: function(e) {
                        var editor = $(this).data("kendoEditor");

                        var dialog = $($("#viewHtml-template").html())
                            .find("textarea").val(editor.value()).end()
                            .find(".viewHtml-update")
                                .click(function() {
                                    editor.value(dialog.element.find("textarea").val());
                                    dialog.close();
                                })
                            .end()
                            .find(".viewHtml-cancel")
                                .click(function() {
                                    dialog.close();
                                })
                            .end()
                            .kendoWindow({
                                modal: true,
                                title: "View HTML",
                                deactivate: function() {
                                    dialog.destroy();
                                }
                            }).data("kendoWindow");

                        dialog.center().open();
                    }
                }
            ]
        });
    </script>

    <style scoped>
        .k-viewHtml {
            background: transparent url(../../content/web/editor/insert-html-icon.png) no-repeat 50% 50%;
        }
    </style>
</div>

</body>
</html>
